<template>
  <div class="info">
    <div class="info-top-count">
      <div class="info-bot color-left">预估佣金：{{userInfo.predictMoney}}</div>
      <div class="info-bot color-right">预估积分：{{userInfo.predictPoint}}</div>
    </div>
    <div v-if="istrue" class="detail-count">
      <router-link to="/user-balance">
        <div class="area-one buttonclick">
          <div class="left">{{userInfo.balance}}</div>
          <div class="right">账户余额</div>
        </div>
      </router-link>
      <div class="area-line"></div>
      <router-link to="/my-integral">
        <div class="area-one buttonclick">
          <div class="left">{{userInfo.point}}</div>
          <div class="right">可用积分</div>
        </div>
      </router-link>
      <div class="area-line"></div>
      <router-link to="/user-cartbalance">
        <div class="area-one buttonclick">
          <div class="left">{{userInfo.memberCardBalance}}</div>
          <div class="right">会员卡余额</div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  props: {
    istrue: {
      default: true
    },
    userInfo: Object
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.info
  background-color: white
  border-bottom: 0.02rem solid #eee
  .info-top-count
    display: flex
    text-align: center
    .info-bot
      width: 50%
      color: #fff
      background-color: red
      height: .9rem
      line-height: .9rem
    .color-left
      background: linear-gradient(to right, #FF4747, #f79500)
    .color-right
      background: linear-gradient(to left, #FF4747, #f79500)
      border-left:1px solid #fff
  .detail-count
    padding: 0.12rem 0 0.12rem
    .area-one
      width: 30% !important
      border-bottom: 0 !important
      position: relative
      text-align: center
      display: inline-block
      vertical-align: middle
      .left
        color: #4e4e4e
        height: 0.48rem
        line-height: 0.48rem
        font-size: 0.35rem
      .right
        font-size: 0.3rem
        color: #7b7b7b
        height: 0.48rem
        line-height: 0.48rem
    .area-line
      width: 0.02rem
      height: 0.5rem
      vertical-align: middle
      background-color: #DEDBD5
      display: inline-block
</style>
